let arr = [
    {x:-64, s:.83, z: 1},
    {x:140, s: 1, z: 2},
    {x:338, s:.83, z: 1},
    {x:960, s:.83, z: 1},
    {x:960, s:.83, z: 1},
    {x:960, s:.83, z: 1},
]

function  render()
{
    let swiperobj = document.querySelectorAll(".swiper .swiper-slide")
    swiperobj.forEach((item,index)=>{
        item.style.transform = `translateX(${arr[index].x}px) scale(${arr[index].s})`
        item.style.zIndex = arr[index].z
    })
}

render()

function  next()
{
    let temp = arr.pop()
    arr.unshift(temp)
    render()
}
document.querySelector(".swiper .swiper-next").onclick = next

function prev()
{
    let temp = arr.shift()
    arr.push(temp)
    render()
}
document.querySelector(".swiper .swiper-prev").onclick = prev

document.querySelector(".swiper .swiper-wrapper").onclick = function(evt){
    let e = evt || window.event
    let target = e.target || e.srcElement
    if(target.parentNode.style.transform.includes("64px"))
    {
        prev()
    }
    if(target.parentNode.style.transform.includes("338px"))
    {
        next()
    }
}

setInterval(function(){
    next()
},5000)